<template>
  <view
    :class="chapterClass"
    @click="handleClick"
  >
    <!-- 左侧状态指示 -->
    <view class="chapter-status">
      <BaseIcon
        v-if="chapter.isRead"
        name="i-carbon-checkmark-filled"
        size="small"
        color="var(--text-success)"
      />
      <BaseIcon
        v-else-if="chapter.isReading"
        name="i-carbon-play-filled"
        size="small"
        color="var(--novel-primary)"
      />
      <view v-else class="unread-dot"></view>
    </view>

    <!-- 章节信息 -->
    <view class="chapter-info">
      <!-- 章节标题 -->
      <text class="chapter-title">{{ chapter.title }}</text>

      <!-- 章节副标题/描述 -->
      <text v-if="chapter.description" class="chapter-description">
        {{ chapter.description }}
      </text>

      <!-- 章节元信息 -->
      <view class="chapter-meta">
        <text v-if="chapter.wordCount" class="meta-item">
          <text class="i-carbon-document mr-1"></text>
          {{ formatWordCount(chapter.wordCount) }}
        </text>
        <text v-if="chapter.publishTime" class="meta-item">
          <text class="i-carbon-time mr-1"></text>
          {{ formatTime(chapter.publishTime) }}
        </text>
        <text v-if="chapter.isVip" class="vip-badge">
          VIP
        </text>
      </view>

      <!-- 阅读进度条 -->
      <view v-if="chapter.progress > 0" class="progress-container">
        <view class="progress-bar">
          <view
            class="progress-fill"
            :style="{ width: `${chapter.progress}%` }"
          ></view>
        </view>
        <text class="progress-text">{{ chapter.progress }}%</text>
      </view>
    </view>

    <!-- 右侧操作区 -->
    <view class="chapter-actions">
      <!-- 下载状态 -->
      <BaseIcon
        v-if="chapter.isDownloaded"
        name="i-carbon-download-filled"
        size="small"
        color="var(--text-success)"
      />
      <BaseIcon
        v-else-if="chapter.isDownloading"
        name="i-carbon-download"
        size="small"
        color="var(--text-muted)"
      />

      <!-- 锁定状态 -->
      <BaseIcon
        v-if="chapter.isLocked"
        name="i-carbon-locked"
        size="small"
        color="var(--text-muted)"
      />

      <!-- 箭头 -->
      <BaseIcon
        v-if="showArrow"
        name="i-carbon-chevron-right"
        size="small"
        color="var(--text-muted)"
      />
    </view>

    <!-- 章节标签 -->
    <view v-if="chapter.tags && chapter.tags.length > 0" class="chapter-tags">
      <text
        v-for="tag in chapter.tags"
        :key="tag"
        class="tag-item"
      >
        {{ tag }}
      </text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import BaseIcon from '../ui/BaseIcon.vue'

interface Chapter {
  id: string
  title: string
  description?: string
  wordCount?: number
  publishTime?: string | Date
  isRead?: boolean
  isReading?: boolean
  isVip?: boolean
  isLocked?: boolean
  isDownloaded?: boolean
  isDownloading?: boolean
  progress?: number
  tags?: string[]
}

interface Props {
  // 章节数据
  chapter: Chapter
  // 是否可点击
  clickable?: boolean
  // 是否显示箭头
  showArrow?: boolean
  // 布局类型
  layout?: 'horizontal' | 'vertical'
  // 紧凑模式
  compact?: boolean
  // 自定义类名
  customClass?: string
}

const props = withDefaults(defineProps<Props>(), {
  clickable: true,
  showArrow: true,
  layout: 'horizontal',
  compact: false,
  customClass: '',
})

const emit = defineEmits<{
  click: [chapter: Chapter]
}>()

// 章节样式
const chapterClass = computed(() => {
  const baseClass = 'chapter-item'

  const layoutClass = props.layout === 'vertical'
    ? 'chapter-vertical'
    : 'chapter-horizontal'

  const compactClass = props.compact ? 'chapter-compact' : ''

  const clickableClass = props.clickable
    ? 'cursor-pointer hover:bg-bg-light active:scale-98'
    : ''

  const readClass = props.chapter.isRead ? 'chapter-read' : ''

  const readingClass = props.chapter.isReading ? 'chapter-reading' : ''

  return [
    baseClass,
    layoutClass,
    compactClass,
    clickableClass,
    readClass,
    readingClass,
    props.customClass,
  ].filter(Boolean).join(' ')
})

// 格式化字数
const formatWordCount = (count?: number) => {
  if (!count) return ''
  if (count >= 10000) {
    return `${(count / 10000).toFixed(1)}万字`
  }
  return `${count}字`
}

// 格式化时间
const formatTime = (time?: string | Date) => {
  if (!time) return ''
  const date = new Date(time)
  const now = new Date()
  const diff = now.getTime() - date.getTime()

  const minute = 60 * 1000
  const hour = 60 * minute
  const day = 24 * hour

  if (diff < minute) {
    return '刚刚'
  } else if (diff < hour) {
    return `${Math.floor(diff / minute)}分钟前`
  } else if (diff < day) {
    return `${Math.floor(diff / hour)}小时前`
  } else if (diff < 7 * day) {
    return `${Math.floor(diff / day)}天前`
  } else {
    return date.toLocaleDateString()
  }
}

// 处理点击
const handleClick = () => {
  if (props.clickable) {
    emit('click', props.chapter)
  }
}
</script>

<style scoped>
.chapter-item {
  @apply flex items-center gap-3 p-md border-b border-custom last:border-b-0;
  @apply transition-all duration-200 relative;
}

.chapter-horizontal {
  @apply flex-row;
}

.chapter-vertical {
  @apply flex-col items-start;
}

.chapter-compact {
  @apply p-sm gap-2;
}

.chapter-read {
  opacity: 0.7;
}

.chapter-reading {
  background-color: rgba(255, 107, 53, 0.05);
}

.chapter-status {
  @apply flex-shrink-0 w-6 flex items-center justify-center;
}

.unread-dot {
  @apply w-2 h-2 bg-novel-primary rounded-full;
}

.chapter-info {
  @apply flex-1 min-w-0;
}

.chapter-title {
  @apply text-base font-medium text-text-primary mb-1;
  @apply line-clamp-1;
}

.chapter-description {
  @apply text-sm text-text-secondary mb-2;
  @apply line-clamp-2;
}

.chapter-meta {
  @apply flex items-center gap-3 flex-wrap;
}

.meta-item {
  @apply flex items-center text-xs text-text-muted;
}

.vip-badge {
  @apply px-2 py-0.5 bg-yellow-500/20 text-yellow-600 text-xs rounded-custom;
  font-size: 20rpx;
}

.progress-container {
  @apply flex items-center gap-2 mt-2;
}

.progress-bar {
  @apply flex-1 h-1 bg-bg-light rounded-full overflow-hidden;
}

.progress-fill {
  @apply h-full bg-novel-primary transition-all duration-300;
}

.progress-text {
  @apply text-xs text-text-muted;
}

.chapter-actions {
  @apply flex items-center gap-2 flex-shrink-0;
}

.chapter-tags {
  @apply flex gap-1 mt-2 flex-wrap;
}

.tag-item {
  @apply px-2 py-0.5 bg-novel-primary/20 text-novel-primary text-xs rounded-custom;
  font-size: 20rpx;
}

/* 文本截断工具类 */
.line-clamp-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.active\:scale-98:active {
  transform: scale(0.98);
}
</style>